<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>清除浮动</title>
</head>
<style>
  .par {
    border: 5px solid rgb(91, 243, 30);
    width: 300px;
  }

  .par::after {
    clear: both;
    content: '';
    display: block;
  }

  .child {
    border: 5px solid rgb(233, 250, 84);
    width: 100px;
    height: 100px;
    float: left;
  }
</style>

<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>
<script>



  function aa() {
    console.log(111);
  }

  document.querySelector('.par').onclick = jieliu(aa, 2000, true)

  function fangdou(fn, time, immediate) {
    let timeout
    return function () {
      if (timeout) clearTimeout(timeout)
      if (immediate) {
        // 立即
        let nowTime = !timeout
        if (nowTime) fn.apply(this, arguments)
        timeout = setTimeout(function () {
          timeout = null;
        }, time)
      } else {
        // 非立即
        timeout = setTimeout(function () {
          fn.apply(this, arguments)
        }, time)
      }
    }
  }

  function jieliu(fn, time, imm) {
    let timeout
    return function () {
      if (!timeout) {
        if (imm) {
          // 立即
          fn.apply(this, arguments)
          timeout = setTimeout(function () {
            timeout = null;
          }, time)
        } else {
          //非立即
          timeout = setTimeout(function () {
            fn.apply(this, arguments)
            timeout = null;
          }, time)
        }
      }
    }
  }


</script>

</html>